<template>
  <view class="input-box">
    <!-- 头部标题 -->
    <view class="input-head">
      <text class="head-title">Input 输入框</text>
    </view>

    <!-- 输入框列表 -->
    <view class="input-list">
      <!-- 发送键盘 -->
      <view class="input-item">
        <text class="item-label">发送按钮键盘</text>
        <input type="text" confirm-type="send" placeholder="请输入内容" class="item-input" />
      </view>

      <!-- 最大长度 -->
      <view class="input-item">
        <text class="item-label">最大输入10字</text>
        <input type="text" maxlength="10" placeholder="最多输10个字符" class="item-input" />
      </view>

      <!-- 实时显示 -->
      <view class="input-item">
        <text class="item-label">实时值：{{ realVal }}</text>
        <input type="text" @input="realVal = $event.detail.value" placeholder="输入即显示" class="item-input" />
      </view>

      <!-- 数字输入 -->
      <view class="input-item">
        <text class="item-label">数字输入</text>
        <input type="number" placeholder="请输数字" class="item-input" />
      </view>

      <!-- 密码输入 -->
      <view class="input-item">
        <text class="item-label">密码输入</text>
        <input type="password" placeholder="请输密码" class="item-input" />
      </view>

      <!-- 带小数点 -->
      <view class="input-item">
        <text class="item-label">带小数点</text>
        <input type="digit" placeholder="请输小数" class="item-input" />
      </view>

      <!-- 身份证 -->
      <view class="input-item">
        <text class="item-label">身份证输入</text>
        <input type="idcard" placeholder="请输身份证号" class="item-input" />
      </view>

      <!-- 红色占位符 -->
      <view class="input-item">
        <text class="item-label">红色占位符</text>
        <input type="text" placeholder="我是红色的" placeholder-style="color:red" class="item-input" />
      </view>

      <!-- 清除按钮 -->
      <view class="input-item" style="position:relative;">
        <text class="item-label">带清除按钮</text>
        <input type="text" :value="clearVal" @input="clearVal = $event.detail.value" placeholder="输入后可清除" class="item-input" />
        <text v-if="clearVal" @click="clearVal = ''" class="clear-btn">×</text>
      </view>

      <!-- 显示密码 -->
      <view class="input-item" style="position:relative;">
        <text class="item-label">可看密码</text>
        <input :type="isPwd ? 'password' : 'text'" placeholder="请输密码" class="item-input" />
        <text @click="isPwd = !isPwd" class="eye-btn">{{ isPwd ? '👁️' : '👁️‍🗨️' }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
// 简化状态定义，直接用 ref
import { ref } from 'vue'
const realVal = ref('')  // 实时输入值
const clearVal = ref('') // 带清除的输入值
const isPwd = ref(true) // 密码可见性
</script>

<style scoped>
/* 简化样式，保留核心布局 */
.input-box {
  min-height: 100vh;
  background: #f7f7f7;
  padding: 20rpx;
}

/* 头部 */
.input-head {
  background: #fff;
  padding: 25rpx;
  margin-bottom: 20rpx;
}
.head-title {
  font-size: 38rpx;
  color: #999;
  display: block;
  text-align: center;
  padding-bottom: 10rpx;
  border-bottom: 1rpx solid #eee;
}

/* 输入框列表 */
.input-list {
  background: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
}

/* 单个输入项 */
.input-item {
  margin-bottom: 30rpx;
}
.item-label {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 10rpx;
}
.item-input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  border: 2rpx solid #ddd;
  border-radius: 10rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}

/* 清除/眼睛按钮 */
.clear-btn, .eye-btn {
  position: absolute;
  right: 30rpx;
  top: 60rpx;
  font-size: 40rpx;
  color: #999;
}
.eye-btn {
  right: 80rpx;
}
</style>